/*
 * @Author: xiaosihan 
 * @Date: 2022-06-23 21:15:04 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2023-12-18 02:08:11
 */


import SpriteText from "../SpriteText";
import spriteTextBgPNG from "./spriteTextBg.png";
import icon1PNG from "./icon1.png";

/**
 * 文本弹窗
 * @export
 * @class SpriteText
 * @extends {ThreeSpritetext}
 */
export default class AreaName1 extends SpriteText {

    constructor(text = "SpriteText", textHeight?: number, color?: string) {
        super(text, textHeight);

        this.text = `${text}\n\n\n`;
        this.renderOrder = 100;
        // this.backgroundColor = "#ffffffaa";
        this.padding = 4;
        this.borderRadius = 4;
        this.borderWidth = 0;
        this.textHeight = 20;
        // this.borderColor = "#fff";
        // this.color = "#000";

        if (this.material.map) {
            this.material.map.anisotropy = 16;
            this.material.transparent = true;
            // this.material.alphaTest = 0.3;
            this.material.depthTest = false;
            this.material.sizeAttenuation = false;
        }
    }

    renderOrder = 10;

    static bgImage = (() => {
        const bgImage = new Image();
        bgImage.src = spriteTextBgPNG;
        return bgImage;
    })();

    static Icon1PNG = (() => {
        const img = new Image();
        img.src = icon1PNG;
        return img;
    })();

    _genCanvas() {
        //@ts-ignore
        super._genCanvas();
        this.scale.multiplyScalar(0.0012);
        if (this.parent) {
            this.scale.divide(this.parent.scale);
        }

        (async () => {

            while (!AreaName1.bgImage.complete) {
                await new Promise(resolve => setTimeout(resolve, 200));
            }

            while (!AreaName1.Icon1PNG.complete) {
                await new Promise(resolve => setTimeout(resolve, 200));
            }

            //@ts-ignore
            super._genCanvas();
            this.scale.multiplyScalar(0.0012);
            if (this.parent) {
                this.scale.divide(this.parent.scale);
            }

            //@ts-ignore
            const canvas = this._canvas as HTMLCanvasElement;
            const { width: btnBgWidth, height: btnBgHeight } = AreaName1.bgImage;
            const { width, height } = canvas;
            const ctx = canvas.getContext("2d")!;
            ctx.globalCompositeOperation = "destination-over";

            ctx.setTransform(1, 0, 0, 1, 0, 0);
            // ctx.drawImage(AreaName1.bgImage, 0, 0, btnBgWidth, btnBgHeight, 0, 0, width, height);

            const { width: iconWidth, height: iconHeight } = AreaName1.Icon1PNG;
            ctx.drawImage(AreaName1.Icon1PNG, 0, 0, iconWidth, iconHeight, (width - iconWidth * 8) * 0.5, (height * 0.5) - (iconHeight * 8), iconWidth * 8, iconHeight * 8);

            this.material.map!.needsUpdate = true;

        })();

    }










}